<template>
  <div id="app">
    <img src="./assets/logo.png"/><br>

    <router-link to='/'>首页</router-link> |
    <router-link to='/params/123/title abcde'>params</router-link> |
    <router-link to='/goHome'>重定向</router-link> |
    <router-link to='/goParams/918/aaaa'>goParams</router-link> |
    <router-link to='/left'>left</router-link> |
    <router-link to='/superbone'>superbone-别名</router-link> |

    <div>
      <button @click="go">前进</button>
      <button @click="goBack">后退</button>
      <button @click="goHome">返回首页</button>
    </div>

    <transition name='fade' mode="out-in">
      <router-view></router-view>
    </transition>
    <!--单页面多路由的代码-->
    <!-- <router-view name='left' class="left"></router-view>
    <router-view name='right' class="right"></router-view> -->
  </div>
</template>

<script>
export default {
  name: 'app',
  methods: {
    goBack(){
      this.$router.go(-1);
    },
    go(){
      this.$router.go(1);
    },
    goHome(){

      //跳转到某个页面
      this.$router.push('/');
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.left{
  float: left;
  width: 50%;
  height: 300px;
  background-color: #ccc;
  font-size: 40px;
}
.right{
  float: right;
  width: 50%;
  height: 300px;
  background-color: #aaa;
  font-size: 40px;
}

.fade-enter {
  opacity:0;
}
.fade-leave{
  opacity:1;
}
.fade-enter-active{
  transition:opacity .5s;
}
.fade-leave-active{
  opacity:0;
  transition:opacity .5s;
}
</style>
